<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/css/formSelects-v4.css">
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
<div id="story">
<input type="hidden" name="glId" id="glId" :value="garden_list.glId">
<input type="hidden" :value="garden_list.glName" id="gradeName">
<h2>招生管理</h2>
<hr/>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">幼儿姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">入园日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1">查询</button>
    </div>
</form>



<table class="layui-hide" id="userList" lay-filter="userTable"></table>
</div>
<script>
    $.get("http://localhost:9999/Recruit/list",function(data){
        $.each(data,function(){
            var opt = $("<option></option>").appendTo("#roles");
            opt.text(this.staffName).val(this.staffId);
        });
    });
</script>
<script src="../js/config.js"></script>
<script>
    var table ;
    function reloadData(){
        var roleIds = layui.formSelects.value('roles','val');
        //执行重载
        table.reload('userList', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                cName : $("#username").val(),
                eDate:$("#test1").val(),
                houTime:$("#test2").val()
            }
        });
    }

    layui.config({
        base: '../../layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });

    layui.use(['table','form','formSelects','laydate'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;
        var laydate = layui.laydate;

        table.render({
            elem: '#userList'
            ,url:'http://localhost:9999/Recruit/all?glId='+$("#glId").val()
            ,page: true
            ,even : true
            ,id : "userList"
            ,toolbar:"#toolbarDemo",
            defaultToolbar: []
            ,cols: [[
                {field:'hello',type:'checkbox'}
                ,{field:'cid', title: '编号'}
                ,{field:'cName', title: '幼儿姓名'}
                ,{field:'scheduled',  title: '定班家长', sort: true}
                ,{field:'staff',  title: '负责老师',templet:function (d) {
                        return d.staff.staffName;
                    }}
                ,{field:'emoney', title: '订费金额', sort: true}
                ,{field:'pDate', title: '交款日期', sort: true}
                ,{field:'eDate', title: '预计入学日期', sort: true}
                ,{field:'dpay', title: '是否缴费', sort: true}
                ,{field:'iRefund', title: '是否退费', sort: true}
                ,{field:'garden_list', title: '园所编号', templet:function (d) {
                        return d.garden_list.glName;
                    }},
                {toolbar: '#barDemo'}
            ]]
        });

        //监听行内的工具条
        table.on('tool(userTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'edit'){//TODO 编辑
                $.get('tianjia.html?_'+new Date().getTime(),function (s) {
                    layer.open({
                        type : 1,
                        title : '修改',
                        area:'800px',
                        content:s,
                        btn : ['确定','取消'],
                        success:function(){
                            //对表单回填数据
                            data.iRefund = data.iRefund == '否' ? null : '是';
                            data.glId = data.garden_list.glId;
                            form.val('userForm',data);
                            var time = setInterval(function () {
                                if ($("#glIda option").length >=1){
                                    /*  console.log(data.glId)*/
                                    clearInterval(time)
                                    $("#glIda").val(data.glId);
                                    layui.form.render()

                                }
                            },200)
                           /* $(":radio[name='glId'][value='"+data.glId+"']").attr("checked",true);*/
                            var time1 = setInterval(function () {
                                if($("#roles_add option").length > 1){
                                    $("#roles_add").val(data.staffId);
                                    layui.form.render();
                                    clearInterval(time1);
                                }
                            },200)
                            form.render();
                           /* var rids = [];
                            for(let role of data.staff){
                                rids.push(role.staffId);
                            }
                            console.log(rids[0].staffId);
                            var t =setInterval(function () {
                                if($("#roles_add option").length > 1){
                                    select.value('roles2',rids);
                                    clearInterval(t);
                                }
                            },100)*/

                        },
                        yes : function () {

                            var str = $("#add_user_form").serialize();

                            /* var a = str['iRefund'];
                             alert(a);*/
                            /*if (ss == 'on') {
                                str['iRefund']='是'
                            }else{
                                str['iRefund']='否'
                            }*/
                            /*var a = str["iRefund"];
                            alert(a);*/
                            /*console.log(str);*/
                            $.get("http://localhost:9999/Recruit/update",str,function () {
                                layer.close(layer.index);
                                table.reload('userList');
                            })
                        }
                    })
                })
            } else if (layEvent === 'detail'){ //TODO 查看详情

            }
        });
        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            var h = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    $.get("tianjia.html",function (data) {
                        layer.open({
                            type : 1,
                            title : '添加',
                            skin : 'layui-layer-molv',
                            anim:1,
                            area : ['800px','600px'],
                            content : data,
                            btn : ['确定','取消'],
                            success:function(){
                                laydate.render();
                            },
                            yes : function () {
                                var str = $("#add_user_form").serialize();
                                $.post(`${new Config().base_url}/Recruit/add`,str,function (data) {
                                    layer.close(layer.index);
                                    table.reload('userList');
                                });
                            }
                        })

                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

    });

    var vm = new Vue({
        el:'#story',
        data:{
            garden_list:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.garden_list = User_PermissionData.kmsUser.garden_list;
            /*if (a == null){
                this.garden_listName = '总部';
            } else {
                this.garden_listName=a.glName;
            }*/
        },
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
</script>

<script type="text/html" id="shifou">
    <input type="checkbox" name="locked" value="{{d.locked}}" title="启用" lay-filter="roleTable" {{d.locked == 1 ? 'checked' : ''}}>
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });
        laydate.render({
            elem: '#test2'
        });
    });
</script>

</body>
</html>                                                                 